<template>
	<view>
		<view class="topBar">
			<!-- 自定义导航栏 -->
			<view>
				<uni-nav-bar @clickLeft="back" height="50px" backgroundColor="#3284fc" left-icon="left" :border="false"
					leftText="返回" rightText="设置" title="附近门店" />
			</view>
			<!-- 搜索框 -->
			<u-search class="topSearch" v-model="value1" @clear="clear1" :clearabled="true" :showAction="true"
				actionText="搜索" :animation="false" bgColor='#fff' height="60rpx"></u-search>
			<!-- 历史记录 -->
			<view class="hostoryContent">
				<view class="hostryInfo">
					<view class="title1">历史记录:</view>
					<text>飞飞汽车美容店</text>
					<text>飞飞汽车美容店</text>
					<text>飞飞汽车美容店</text>
					<text>飞飞汽车美容店</text>
					<text>飞飞汽车美容店</text>
					<text>飞飞汽车美容店</text>
				</view>
			</view>
		</view>

		<!-- 车百事汽车生活馆 -->
		<view class="carHoom">
			<uni-card class="title2" title="车百事汽车生活馆" extra="556m">
				<view class="starInfo">
					<u-rate :count="count" v-model="value"></u-rate>
					<text style="margin: 0 20rpx;">5分</text>
					<text>售量:556</text>
				</view>
				<view class="carHoomItem">
					<image class="img2" src="@/static/myf_img/kc02.jpg"></image>
					<view class="carHoomInfo">
						<view>营业时间:周一到周五</view>
						<view>早上8:00-晚上22:00</view>
						<view>山阳区人民路与解放路交叉口</view>
					</view>
				</view>
			</uni-card>

			<uni-card class="title2" title="车百事汽车生活馆" extra="556m">
				<view class="starInfo">
					<u-rate :count="count" v-model="value"></u-rate>
					<text style="margin: 0 20rpx;">5分</text>
					<text>售量:556</text>
				</view>
				<view class="carHoomItem">
					<image class="img2" src="@/static/myf_img/kc02.jpg"></image>
					<view class="carHoomInfo">
						<view>营业时间:周一到周五</view>
						<view>早上8:00-晚上22:00</view>
						<view>山阳区人民路与解放路交叉口</view>
					</view>
				</view>
			</uni-card>
			<!-- 加载更多 -->
			<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				count: 5,
				value: 5,
				value1: '汽车美容店'
			}
		},
		methods: {
			clear1() {
				this.value1 = ''
			},
			back() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
		},
		// 上提刷新
		onReachBottom() {
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.list += 10;
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		}
	}
</script>

<style>
	.carHoomItem .carHoomInfo {
		width: 330rpx;
	}

	.carHoomItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
	}

	.carHoomItem .img2 {
		width: 250rpx;
		height: 200rpx;
		border-radius: 30rpx;
	}

	.starInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 450rpx;
		height: 30rpx;
	}

	.title2 {
		height: 400rpx;
		border-radius: 30rpx;
	}

	.topSearch {
		padding: 30rpx 30rpx;
	}

	.topBar {
		background-color: #3284fc;
		width: 750rpx;
		height: 400rpx;
	}

	.hostryInfo {
		color: #fff;
		width: 750rpx;
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding-left: 30rpx;
	}

	.hostryInfo .title1 {
		font-size: 36rpx;
		font-weight: 700;
	}

	.hostryInfo text {
		margin-left: 4rpx;
	}
</style>